import 'package:flutter/material.dart';

void main() => runApp( MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: 'Flutter Demo',
      theme:  ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:  BottomSheetPage(),
    );
  }
}

class BottomSheetPage extends StatefulWidget {
  const BottomSheetPage({super.key});

  @override
  _BottomSheetPageState createState() =>  _BottomSheetPageState();
}

class _BottomSheetPageState extends State<BottomSheetPage> {
  final _scaffoldKey =  GlobalKey<ScaffoldState>();
  VoidCallback ?_showPersBottomSheetCallBack;

  @override
  void initState() {
    super.initState();
    _showPersBottomSheetCallBack = _showBottomSheet;
  }

  void _showBottomSheet() {
    setState(() {
      _showPersBottomSheetCallBack = null;
    });

    _scaffoldKey.currentState
        ?.showBottomSheet((context) {
      return  Container(
        height: 300.0,
        color: Colors.greenAccent,
        child:  const Center(
          child:  Text("Hi BottomSheet"),
        ),
      );
    })
        .closed
        .whenComplete(() {
      if (mounted) {
        setState(() {
          _showPersBottomSheetCallBack = _showBottomSheet;
        });
      }
    });
  }


  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      key: _scaffoldKey,
      appBar:  AppBar(
        title:  const Text("Flutter BottomSheet"),
      ),
      body:  Padding(
        padding: const EdgeInsets.all(20.0),
        child:  Center(
            child:  Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                 OutlinedButton(
                  onPressed: _showPersBottomSheetCallBack,
                  child:  const Text("Persistent"),
                ),
                 const Padding(
                  padding: EdgeInsets.only(top: 10.0),
                ),
                 OutlinedButton(
                  onPressed: (){
                    showModalBottomSheet(
                        context: context,
                        builder: (builder) {
                          return  Container(
                            color: Colors.greenAccent,
                            child:  const Center(
                              child:  Text("Hi ModalSheet"),
                            ),
                          );
                        });
                  },
                  child:  Text("Modal"),
                ),
              ],
            )),
      ),
    );
  }
}